<template>
	<view class="position-relative">
		<view class="">
			<image src="../../static/image/20241108_10153762.png" style="height: 300rpx" class="w-100 filter" mode="aspectFill"></image>
		</view>

		<view class="px-2 position-absolute flex align-center" style="top: 150rpx">
			<image :src="userPic" class="rounded-circle" style="width: 120rpx; height: 120rpx" mode="aspectFill"></image>
			<text class="ml-3 text-white font-md">小袁</text>
		</view>
		<view class="px-2">
			<view class="flex justify-around align-center">
				<view class="flex align-center">
					<text class="font-md">{{ follows }}</text>
					关注
				</view>
				<view class="flex align-center">
					<text class="font-md">{{ fenshi }}</text>
					粉丝
				</view>
				<view class="flex align-center">
					<text class="font-md">{{ post }}</text>
					帖子
				</view>
			</view>

			<view class="font-md mx-2 py-1 text-dark text-center" v-if="LoginUserId + '' === item.userId">个人空间</view>
			<view class="" v-else>
				<view class="font-sm mx-2 py-1 bg-main text-white text-center" v-if="item.isFollow === '0'" @click="follow(0)">关注</view>
				<view class="font-sm mx-2 py-1 text-center" style="background-color: rgba(0, 0, 0, 0.2)" v-else-if="item.isFollow === '1'" @click="follow(1)">已关注</view>
				<view class="font-sm mx-2 py-1 bg-hover-warning text-dark text-center" v-else-if="item.isFollow === '2'" @click="follow(2)">互关</view>
				<view class="font-sm mx-2 py-1 bg-hover-info text-dark text-center" style="color: aliceblue" v-else-if="item.isFollow === '3'" @click="follow(3)">回关</view>
			</view>
		</view>
		<view class="flex align-center justify-around mt-3">
			<view @click="changeTarIndex(index)" v-for="(item, index) in tarBar" :key="index" class="font-sm" :class="index === tarIndex ? 'text-main' : ''">
				{{ item }}
			</view>
		</view>

		<view class="mt-3 px-2" v-if="tarIndex === 0">
			<view class="flex flex-column justify-around border-bottom pb-3">
				<text class="font-md">账号信息</text>
				<text class="font-sm mt-2">账号年龄:未完成</text>
				<text class="font-sm mt-2">账号id:{{ userInfo.id }}</text>
			</view>
			<view class="flex flex-column justify-around border-bottom mt-3 pb-3">
				<text class="font-md">个人信息</text>
				<text class="font-sm mt-2">星座:{{ userInfo.xz }}</text>
				<text class="font-sm mt-2">职业:{{ userInfo.job }}</text>
				<text class="font-sm mt-2">故乡:{{ userInfo.place }}</text>
				<text class="font-sm mt-2">情感:{{ userInfo.qg }}</text>
				<text class="font-sm mt-2">年龄:{{ userInfo.age }}</text>
			</view>
		</view>
		<view class="" v-else>
			<template v-if="datalist.length > 0">
				<block v-for="(item, index) in datalist">
					<list :item="item" :index="index" :isDetail="true" :userId="LoginUserId"></list>
				</block>
			</template>
			<view v-else-if="isloading1 !== true || isloading2 !== true"></view>
			<template v-else>
				<noThing></noThing>
			</template>

			<!-- 上拉加载更多 -->
			<view v-else-if="dataList.length > 3">
				<loadmore :loadmore="loadtext"></loadmore>
			</view>
		</view>

		<view class="">
			<u-popup v-model="show" mode="bottom">
				<view class="text-center py-2" hover-class="bg-light" @click="addBlack">
					<text class="iconfont icon-shanchu mr-2"></text>
					拉黑用户
				</view>
				<view class="text-center py-2" hover-class="bg-light" @click="openChat">
					<text class="iconfont icon-sixin mr-2"></text>
					发送私信
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { getUserSpace } from '@/request/Api/user.js';
import { addBlack } from '@/request/Api/black.js';
import { addFollow, delFollow, support } from '@/request/Api/post.js';
import list from '../../compoment/IndexCommen/list.vue';
import { getPostByUserId } from '@/request/Api/post.js';
import $T from '@/common/time.js';
export default {
	data() {
		return {
			userPic: '',
			post: 0,
			fenshi: 0,
			follows: 0,
			tarBar: ['主页', '帖子', '喜欢'],
			tarIndex: 0,
			item: {},
			userInfo: {},
			list1: [],
			list2: [],
			page1: 1,
			page2: 1,
			loadtext1: '上拉加载更多',
			loadtext2: '上拉加载更多',
			isloading1: false,
			isloading2: false,
			LoginUserId: 0,
			show: false
		};
	},
	components: {
		list
	},
	onReachBottom() {
		if (this.tarIndex === 1) {
			this.getPostList();
		}
		if (this.tarIndex === 2) {
			this.getlikeList();
		}
	},
	onUnload() {
		uni.$off('followOrdosupport', (res) => {});
		uni.$off('commentCount', (res) => {});
	},

	computed: {
		datalist() {
			if (this.tarIndex === 1) {
				return this.list1;
			}
			if (this.tarIndex === 2) {
				return this.list2;
			}
		},
		loadtext() {
			if (this.tarIndex === 1) {
				return this.loadtext1;
			}
			if (this.tarIndex === 2) {
				return this.loadtext2;
			}
		}
	},
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			this.show = true;
		}
	},
	methods: {
		openChat() {
			
			let user = {
				userId: this.item.userId,
				nikename: this.item.nikeName,
				userPic: this.userPic
			};
			console.log(user)
			let item;
			// 获取所有回话列表
			const userinfo = uni.getStorageSync('userInfo');
			if (!userinfo) {
				return uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
			}
			let list = uni.getStorageSync('chatList_' + userinfo.id);
			let chatlist = list ? JSON.parse(list) : [];
			chatlist.forEach((v) => {
				if (v.userId == user.userId) {
					item = v;
				}
			});
			uni.setStorageSync('user', JSON.stringify(user));
			uni.navigateTo({
				url: '/pages/user-chat/user-chat',
				success: (res) => {
					if (item) {
						// 更新未读数
						this.$store.dispatch('readChatMessage', item);
					}
					this.show = false;
				}
			});
		},
		addBlack() {
			addBlack({
				blackId: this.item.userId
			}).then(() => {
				uni.showToast({
					title: '已拉黑',
					icon: 'none'
				});
			});
		},
		changeTarIndex(index) {
			this.tarIndex = index;
			if (index === 1) {
				if (this.isloading1) {
					return;
				}
				this.getPostList();
			} else if (index === 2) {
				if (this.isloading2) {
					return;
				}
				this.getlikeList();
			}
		},

		getPostList() {
			if (this.loadtext1 !== '上拉加载更多') {
				return;
			}
			this.loadtext1 = '加载中';
			getPostByUserId({ Userid: this.item.userId, current: this.page1, loginUserId: this.LoginUserId }).then((res) => {
				const list = res.data.map((v) => {
					return {
						id: v.id,
						userId: v.userId,
						userpic: v.user.userpic,
						nikeName: v.user.nikeName,
						createTime: v.createTime,
						isFollow: v.isFollow,
						title: v.title,
						titlepic: v.titlepic,
						supportVo: v.supportVo,
						commentCount: v.commentCount,
						sharenum: v.sharenum
					};
				});
				this.list1 = [...this.list1, ...list];
				this.isloading1 = true;
				if (res.data.length < 5) {
					this.loadtext1 = '没有跟多了';
				} else {
					this.loadtext1 = '上拉加载更多';
					this.page1++;
				}
			});
		},
		getlikeList() {},
		getdata() {
			getUserSpace({ userId: this.item.userId }).then((res) => {
				this.follows = res.data.followNum;
				this.fenshi = res.data.fenshiNum;
				this.post = res.data.postNum
				const item = res.data.userinfo;
				this.userInfo = {
					id: item.id,
					job: item.job ? item.job : '未设置',
					age: item.age ? item.age : '未设置',
					place: item.path ? item.path : '未设置',
					qg: item.qg === 0 ? '未婚' : '已婚',
					xz: item.birthday ? $T.getHoroscope(item.birthday) : '未设置'
				};
			});
		},
		follow(num) {
			let w;
			//关注
			if (num === 0) {
				w = 1;
				addFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//取消关注
			if (num === 1) {
				w = 0;
				delFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//取消关注
			if (num === 2) {
				w = 3;
				delFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
			//关注
			if (num === 3) {
				w = 2;
				addFollow({
					followId: this.item.userId
				}).then((res) => {
					this.emit(w);
				});
			}
		},
		emit(w) {
			console.log(this.item.userId);
			this.item.isFollow = w + '';
			this.list2.forEach((item) => {
				item.isFollow = w;
			});
			this.list1.forEach((item) => {
				item.isFollow = w;
			});
			uni.$emit('followOrdosupport', {
				type: 'follow',
				userId: this.item.userId,
				num: w
			});
		},
		//顶踩
		dosupport(e) {
			let item = '';
			this.datalist.forEach((v) => {
				if (v.id === e.id) {
					item = v;
				}
			});

			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		}
	},
	onLoad(e) {
		this.userPic = uni.getStorageSync('image');
		const userINfo = uni.getStorageSync('userInfo');
		this.LoginUserId = userINfo.id;
		uni.setNavigationBarTitle({
			title: e.nikeName
		});
		this.item = e;
		this.getdata();

		uni.$on('followOrdosupport', (res) => {
			if (res.type === 'follow') {
				this.item.isFollow = res.num + '';
				this.list2.forEach((item) => {
					if (item.userId === res.userId) {
						item.isFollow = res.num;
					}
				});
				this.list1.forEach((item) => {
					if (item.userId === res.userId) {
						item.isFollow = res.num;
					}
				});
			}
			if (res.type === 'dosupport') {
				this.dosupport({ num: res.num, id: res.id });
			}
		});
		uni.$on('commentCount', (res) => {
			this.datalist.forEach((v) => {
				if (v.id === res.id) {
					v.commentCount = res.num;
				}
			});
		});
	}
};
</script>

<style></style>
